.nom-auto-complete-popup {
  max-height: 300px;
  overflow: auto;
}

.nom-auto-complete-list {
  .nom-list-item-wrapper {
    &:hover {
      cursor: pointer;
      .nom-preset-hover;
    }

    >.nom-list-item {
      padding: 5px 16px;
    }

    >.s-selected {
      .nom-preset-primary;
    }
  }
}

.nom-auto-complete {
  .nom-auto-complete-clear {
    cursor: pointer;
  }
}

.nom-auto-complete-animate-top-show {
  -webkit-animation: nom-auto-complete-keyframe-top-show .16s linear forwards;
  animation: nom-auto-complete-keyframe-top-show .16s linear forwards;
}

.nom-auto-complete-animate-bottom-show {
  -webkit-animation: nom-auto-complete-keyframe-bottom-show .16s linear forwards;
  animation: nom-auto-complete-keyframe-bottom-show .16s linear forwards;
}

.nom-auto-complete-animate-top-hide {
  -webkit-animation: nom-auto-complete-keyframe-top-hide .16s linear forwards;
  animation: nom-auto-complete-keyframe-top-hide .16s linear forwards;
}

.nom-auto-complete-animate-bottom-hide {
  -webkit-animation: nom-auto-complete-keyframe-bottom-hide .16s linear forwards;
  animation: nom-auto-complete-keyframe-bottom-hide .16s linear forwards;
}

@-webkit-keyframes nom-auto-complete-keyframe-top-show {
  0% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

}

@keyframes nom-auto-complete-keyframe-top-show {
  0% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes nom-auto-complete-keyframe-bottom-show {
  0% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

}

@keyframes nom-auto-complete-keyframe-bottom-show {
  0% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes nom-auto-complete-keyframe-top-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }
}

@keyframes nom-auto-complete-keyframe-top-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }
}

@-webkit-keyframes nom-auto-complete-keyframe-bottom-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }
}

@keyframes nom-auto-complete-keyframe-bottom-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }
}
